<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>用户管理</title>
		<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
		<link rel="icon" href="../assets/img/icon.ico" type="image/x-icon" />
		<!-- Fonts and icons -->
		<script src="../assets/js/plugin/webfont/webfont.min.js"></script>
		<script>
			WebFont.load({
				google: {
					"families": ["Open+Sans:300,400,600,700"]
				},
				custom: {
					"families": ["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"],
					urls: ['../assets/css/fonts.css']
				},
				active: function() {
					sessionStorage.fonts = true;
				}
			});
		</script>
		<!-- CSS Files -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="../assets/css/azzara.min.css">

		<!-- CSS Just for demo purpose, don't include it in your project -->
		<link rel="stylesheet" href="../assets/css/demo.css">
	</head>
	<body>
		<div class="wrapper">
			<div class="main-header" data-background-color="purple"></div>
			<!-- 菜单 -->
			<div class="sidebar" id="commonPage"></div>
			<div class="main-panel">
				<div class="content">
					<div class="page-inner">
						<div class="page-header">
							<h4 class="page-title">用户管理</h4>
							<ul class="breadcrumbs">
								<li class="nav-home">
									<a href="#">
										<i class="flaticon-home"></i>
									</a>
								</li>
								<li class="separator">
									<i class="flaticon-right-arrow"></i>
								</li>
								<li class="nav-item">
									<a href="#">用户管理</a>
								</li>
							</ul>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<div class="card-header">
										<div class="d-flex align-items-center">
											<button class="btn btn-primary btn-round ml-auto" data-toggle="modal" data-target="#addRowModal">
												<i class="fa fa-plus"></i>
												新增商品
											</button>
										</div>
									</div>
									<div class="card-body">
										<!-- 修改密码模态框 -->
										<div class="modal fade" id="changePassword" style="z-index: 10000;" tabindex="-1" role="dialog" aria-hidden="true"></div>
										<!-- 新增用户模态框 -->
										<div class="modal fade" id="addRowModal" tabindex="-1" role="dialog" aria-hidden="true">
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<div class="modal-header no-bd">
														<h5 class="modal-title">
															<span class="fw-mediumbold">
																用户管理
															</span>
														</h5>
														<button type="button" class="close" data-dismiss="modal" aria-label="Close">
															<span aria-hidden="true">&times;</span>
														</button>
													</div>
													<input type="hidden" id="userId" />
													<div class="modal-body">
														<div class="form-group form-inline">
															<label for="inlineinput" class="col-md-3 col-form-label">用户名</label>
															<div class="col-md-9 p-0">
																<input type="text" class="form-control input-full" id="userName" placeholder="请输入用户名">
															</div>
														</div>
														<div class="form-group form-inline">
															<label for="inlineinput" class="col-md-3 col-form-label">密码</label>
															<div class="col-md-9 p-0">
																<input type="password" class="form-control input-full" id="password" placeholder="请输入密码">
															</div>
														</div>
														<div class="form-group form-inline">
															<label for="inlineinput" class="col-md-3 col-form-label">联系方式</label>
															<div class="col-md-9 p-0">
																<input type="text" class="form-control input-full" id="phone" placeholder="请输入联系方式">
															</div>
														</div>
														<div class="form-group form-inline">
															<label for="inlineinput" class="col-md-3 col-form-label">真实姓名</label>
															<div class="col-md-9 p-0">
																<input type="text" class="form-control input-full" id="realName" placeholder="请输入真实姓名">
															</div>
														</div>
														<div class="form-group form-inline">
															<label for="inlineinput" class="col-md-3 col-form-label">邮箱</label>
															<div class="col-md-9 p-0">
																<input type="text" class="form-control input-full" id="email" placeholder="请输入邮箱">
															</div>
														</div>
														<div class="modal-footer no-bd">
															<button type="button" id="addRowButton" class="btn btn-primary">确定</button>
															<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="table-responsive">
											<table id="basic-datatables" class="display table table-striped table-hover">
												<thead>
													<tr>
														<th>用户名</th>
														<th>联系方式</th>
														<th>真实姓名</th>
														<th>邮箱</th>
														<th style="width: 10%">操作</th>
													</tr>
												</thead>
												<tbody id="user_list">
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--   Core JS Files   -->
		<script src="../assets/js/core/jquery.3.2.1.min.js"></script>
		<script src="../assets/js/core/popper.min.js"></script>
		<script src="../assets/js/core/bootstrap.min.js"></script>

		<!-- jQuery UI -->
		<script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
		<script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>

		<!-- jQuery Scrollbar -->
		<script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>

		<!-- Moment JS -->
		<script src="../assets/js/plugin/moment/moment.min.js"></script>

		<!-- Chart JS -->
		<script src="../assets/js/plugin/chart.js/chart.min.js"></script>

		<!-- jQuery Sparkline -->
		<script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>

		<!-- Chart Circle -->
		<script src="../assets/js/plugin/chart-circle/circles.min.js"></script>

		<!-- Datatables -->
		<script src="../assets/js/plugin/datatables/datatables.min.js"></script>

		<!-- Bootstrap Notify -->
		<script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>

		<!-- Bootstrap Toggle -->
		<script src="../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>

		<!-- jQuery Vector Maps -->
		<script src="../assets/js/plugin/jqvmap/jquery.vmap.min.js"></script>
		<script src="../assets/js/plugin/jqvmap/maps/jquery.vmap.world.js"></script>

		<!-- Google Maps Plugin -->
		<script src="../assets/js/plugin/gmaps/gmaps.js"></script>

		<!-- Sweet Alert -->
		<script src="../assets/js/plugin/sweetalert/sweetalert.min.js"></script>

		<!-- Azzara JS -->
		<script src="../assets/js/ready.min.js"></script>

		<!-- Azzara DEMO methods, don't include it in your project! -->
		<script src="../assets/js/setting-demo.js"></script>
		<script type="text/javascript" src="./js/user.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
	</body>
</html>
